<template>
  <div id="container"></div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'

onMounted(() => {
  var map = new window.BMapGL.Map('container')

  // 创建中心点坐标（经度、纬度）
  var point = new window.BMapGL.Point(114.17, 22.56)

  // 下面是添加控件
  var opts = {
    offset: new window.BMapGL.Size(150, 20)
  }

  var scaleCtrl = new window.BMapGL.ScaleControl(opts) // 添加比例尺控件
  map.addControl(scaleCtrl)

  var zoomCtrl = new window.BMapGL.ZoomControl()
  map.addControl(zoomCtrl)

  var cityCtrl = new window.BMapGL.CityListControl() // 添加城市列表控件
  map.addControl(cityCtrl)

  // 以下覆盖物
  var myIcon = new window.BMapGL.Icon(
    'https://t8.baidu.com/it/u=2727075117,3211904074&fm=193',
    new window.BMapGL.Size(100, 100),
    {
      // 指定定位位置。
      // 当标注显示在地图上时，其所指向的地理位置距离图标左上
      // 角各偏移10像素和25像素。您可以看到在本例中该位置即是
      // 图标中央下端的尖角位置。
      anchor: new window.BMapGL.Size(10, 25),
      // 设置图片偏移。
      // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您
      // 需要指定大图的偏移位置，此做法与css sprites技术类似。
      imageOffset: new window.BMapGL.Size(0, 0 - 25) // 设置图片偏移
    }
  )

  var point = new window.BMapGL.Point(114.17, 22.56)
  var marker = new window.BMapGL.Marker(point, { icon: myIcon }) // 创建标注

  // 创建点击之后，出现的信息
  // 创建信息窗口
  var opts1 = {
    width: 200,
    height: 50,
    title: '秋雨手机店'
  }
  var infoWindow = new window.BMapGL.InfoWindow(
    '地址：深圳市罗湖区华强北xxx店铺\n\n' + '联系方式：13811112222',
    opts1
  )

  // 点标记添加点击事件
  marker.addEventListener('click', function () {
    map.openInfoWindow(infoWindow, point) // 开启信息窗口
  })

  map.addOverlay(marker)

  /**
   * 级别越大，表示实际范围越小，越清晰
   * 级别越小，表示的实际范围大，不清晰
   */
  map.centerAndZoom(point, 15)
})
</script>

<style scoped>
#container {
  height: 100%;
}
</style>
